<!--校内时间组管理-->
<template>
  <div class="log">
    <basic-container>
      <!--统计-->
      <avue-data-box :option="option"></avue-data-box>
      <!--表格-->
      <avue-crud
          ref="crud"
          :data="tableData"
          :option="tableOption"
          :page.sync="page"
          :permission="permissionList"
          :table-loading="tableLoading"
          @search-reset="searchReset"
          @on-load="getList"
          @search-change="searchChange"
          @refresh-change="refreshChange"
          @size-change="sizeChange"
          @current-change="currentChange"
          @row-del="handleDel">
        <template slot="menuLeft">
          <el-button
              class="filter-item"
              icon="el-icon-plus"
              size="small"
              type="primary"
              @click.native="addHandle()">新增
          </el-button>
        </template>
        <template slot="menu" slot-scope="scope">
          <el-button
              class="filter-item"
              icon="el-icon-view"
              size="mini"
              type="warning"
              @click.native="seeHandle(scope.row,scope.index)">查看
          </el-button>
          <el-button
              class="filter-item"
              icon="el-icon-edit"
              size="mini"
              type="primary"
              @click.native="editHandle(scope.row,scope.index)">编辑
          </el-button>
          <el-button
              class="filter-item"
              icon="el-icon-delete"
              size="mini"
              type="danger"
              @click="handleDel(scope.row)">删除
          </el-button>
        </template>
        <template slot="states" slot-scope="scope">
          <el-tag v-if="scope.row.states === 0">正常</el-tag>
          <el-tag v-if="scope.row.states === 1" type="danger">停用</el-tag>
        </template>
        <template slot="beforeDateStart" slot-scope="scope">
          <el-tag v-if="scope.row.beforeDateStart !== null" type="danger">有</el-tag>
          <el-tag v-if="scope.row.beforeDateStart === null">无</el-tag>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {DeltimePlan, getPlanCount, timeEdit, timePlan} from '@/api/pass/timeplan'
import {timegroupObj} from '@/api/pass/s-newtimegroup'
import {mapGetters} from 'vuex'

export default {
  name: 'intime-plan',
  data() {
    return {
      tableData: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableLoading: false,
      option: {  //统计
        span: 6,
        data: [
          {
            title: '校内时间组',
            count: 0,
            icon: 'el-icon-office-building',
            color: 'rgb(83, 197, 163)',
          },
        ]
      },
      tableOption: {
        border: true,
        index: true,
        indexLabel: '序号',
        stripe: true,
        menuAlign: 'center',
        menuWidth: 270,
        menuType: 'button',
        align: 'center',
        emptyBtnText: '重置', //清空按钮文案
        refreshBtn: true,
        showClomnuBtn: false,
        searchSize: 'mini',
        searchMenuSpan: 6,
        searchLabelWidth: 86,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        selection: false,
        excelBtn: false,
        props: {
          label: 'label',
          value: 'value'
        },
        column: [
          {
            label: '时间组id',
            prop: 'id',
            hide: true
          },
          {
            label: '时间组名称',
            prop: 'timePlanName',
            type: 'input',
            align:'left',
            search: true,
          }, {
            label: '子时间段数',
            prop: 'timeFrameCount',
          },
          {
            label: '特殊时间段',
            prop: 'beforeDateStart',
            slot: true,
          },
          {
            label: '绑定人数',
            prop: 'plancount',
            width:70,
          },
          {
            label: '生效开始日期',
            prop: 'validTimeStart',
            type: 'datetime',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
          },
          {
            label: '生效结束日期',
            prop: 'validTimeEnd',
            type: 'datetime',
            format: 'yyyy-MM-dd',
            valueFormat: 'yyyy-MM-dd',
          },
          {
            label: '修改时间',
            prop: 'updateTime',
            type: 'datetime',
            format: 'yyyy-MM-dd HH:mm',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            addDisplay: false,
            editDisplay: false,
          }, {
            label: '修改人',
            prop: 'operator',
          }, {
            label: '当前状态',
            prop: 'states',
            slot: true,
          },

        ]
      }
    }
  },
  computed: {
    ...mapGetters(['permissions']),
    permissionList() {
      return {
        delBtn: this.vaildData(this.permissions.sys_time_del, true),
      }
    }
  },
  //从子页面跳回时进行刷新
  activated() {
    this.page.currentPage = 1
    this.getList(this.page)
  },
  methods: {
    //新增跳转
    addHandle() {
      const src = `/pass/inTime-add`
      this.$router.push({
        path: src,
      })
    },

    //展示表格
    getList(page, params) {
      this.tableLoading = true
      timePlan(Object.assign({
        descs: 'create_time',  //是否倒序
        current: page.currentPage,
        size: page.pageSize,
        timeType:1,
      }, params, this.searchForm)).then(response => {
        this.tableData = response.data.data.records
        this.page.total = response.data.data.total
        this.option.data[0].count = response.data.data.total
        //获取绑定人数
        this.tableData.map(item => {
          let param = {
            timePlanDormId: item.id
          }
          timegroupObj(param).then(res => {
            if (res.data.code === 0) {
              this.$set(item, 'plancount',)
              item.plancount = res.data.data.total
            }
          })
        })
        // 获取子时间段
        this.tableData.map(item => {
          let param = {
            timePlanId: item.id
          }
          timeEdit(param).then(res => {
            if (res.data.code === 0) {
              this.$set(item, 'timeFrameCount',)
              item.timeFrameCount = res.data.data.length
            }
          })
        })
        this.tableLoading = false
      })
    },

    //查看跳转
    seeHandle(row) {
      const src = `/pass/inTime-see/${row.id}`
      this.$router.push({
        path: src,
        query: {id: row.id,plancount:row.plancount}
      })
    },
    //编辑跳转
    editHandle(row) {
      const src = `/pass/inTime-edit/${row.id}`
      this.$router.push({
        path: src,
        query: {id: row.id,plancount:row.plancount}
      })
    },

    //删除
    handleDel: function (row){
      const confirmText = ['是否确认删除','删除后对应通行时间即刻全部失效,请谨慎操作!']
      const newDatas = []
      const h = this.$createElement
      for (const i in confirmText) {
        newDatas.push(h('p', null, confirmText[i]))
      }
      this.$confirm(
          '提示',
          '提示',
          {
            title:'提示',
            // center:true,
            message: h('p', null, [
              h('p','是否确认删除'+'['+row.timePlanName+']?'),
              h('p',{style:'color:red;margin:5px 10px 0 0'},'删除后该时间组下的学生所对应通行方案即刻全部失效,请谨慎操作!'),
            ]),
            showCancelButton: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            closeOnClickModal:false,
          }).then(function () {
        return DeltimePlan(row.id)
      }).then(() => {
        this.$message.success('删除成功')
        this.getList(this.page)
      })
    },

    //搜索页面内容
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },

    //点击每页多少条会调size-change方法回调
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },

    //点击页码会调用current-change方法回调当前页
    currentChange(current) {
      this.page.currentPage = current
    },
    refreshChange() {
      this.getList(this.page)
    },

    //清空时重置页面
    searchReset() {
      this.searchForm = {};
      this.getList(this.page)
    }
  }
}
</script>
<style scoped>
/deep/.el-form-item__label{
  text-align: left;
}
/deep/.avue-form__row{
  padding-left: 0 !important;
  margin-right: 36px;
}
</style>
